<template>
    <div class="scan_delivery">
        <top-timer @over="handleOver()" :back="false"/>
        <div class="delivery_box">
            <div class="box_title center" @click="$router.push('deliveryConfirm')">
                <div class="font_40 col_333">箱门已开，请扫码衣物二维码后放入衣柜</div>
                <div class="font_28 col_666">只能投递同一订单衣物，投递完成后，请关闭箱门</div>
            </div>
            <div class="box_form">
                <div class="border1" v-if="keyboard.borderNum==='01'"></div>
                <!--<el-input v-model="bagCode" placeholder="请输入投递码" @keyup.enter.native="getList()"/>-->
                <el-input placeholder="请输入投递码" v-model="bagCode" readonly="readonly" data-layout="numeric"
                          @focus="show($event,'01')" :class="keyboard.borderChecked==='01'?'input_checked':''" @keyup.enter.native="getList()"/>
                <vue-touch-keyboard :options="keyboard.options" v-if="keyboard.visible" :layout="keyboard.layout" :cancel="hide"
                                    :accept="accept" :input="input"/>
            </div>
            <template v-if="showOrder">
                <div class="overflow font_30 col_999" style="margin:0 0.80rem 0.20rem 0.80rem;">
                    <div class="fl">订单：{{deliveryInfo.orderCode}}</div>
                    <div class="fr">配送流水：{{deliveryInfo.sendCode}}</div>
                </div>
                <div class="delivery_list">
                    <el-row class="list_head font_30">
                        <el-col :span="6">衣物编号</el-col>
                        <el-col :span="6">衣物</el-col>
                        <el-col :span="6">颜色</el-col>
                        <el-col :span="6">状态</el-col>
                    </el-row>
                    <el-row class="list_body font_28" :class="info.isSend?'col_blue':'col_666'"
                            v-for="info in deliveryInfo.clothesDetailVOList">
                        <el-col :span="6">{{info.clothesCode}}</el-col>
                        <el-col :span="6">{{info.categoryName}}</el-col>
                        <el-col :span="6">{{info.colorCodeName || '--'}}</el-col>
                        <el-col :span="6">{{info.isSend?'已扫码':'待扫码'}}</el-col>
                    </el-row>
                </div>
            </template>
        </div>
        <top-tips/>
    </div>
</template>

<script>
  export default {
    name: 'scan-delivery',
    data() {
      return {
        bagCode: '',
        deliveryId: '',
        list: [],
        deliveryInfo: {},
        showOrder: false,
        queryInterval: null,
        keyboard:{
          visible: false,
          layout: 'compact',
          input: null,
          borderNum: '',
          borderChecked:'',
          options:{
            useKbEvents: false,
            preventClickEvent: false,
          }
        }
      };
    },
    created() {
      let boxCode = this.$route.query.boxCode;
      this.queryInterval = setInterval(() => {
        let success = (res) => {
          if (res === 'false') {
            clearInterval(this.queryInterval);
            this.closeBox();
          }
        };
        let error = (res) => {
          alert('关箱失败' + res);
        };
        let boxMac = this.$boxConfig[boxCode];
        window.cordova.plugins.CabinetPlugin.sendQueryCommand(boxMac, success, error);
      }, 500);
      window.addEventListener('keydown', this.handleKeydown);
    },
    destroyed() {
      window.removeEventListener('keydown', this.handleKeydown);
      clearInterval(this.queryInterval);
    },
    methods: {
      accept (text) {
        this.hide()
        this.getList()
      },
      show (e, borderNum) {
        this.keyboard.borderNum = borderNum
        this.keyboard.borderChecked = borderNum
        if (e.path[0].value !== '') {
          this.keyboard.borderNum = ''
        }
        this.input = e.target
        this.keyboard.layout = e.target.dataset.layout
        if (!this.keyboard.visible)
          this.keyboard.visible = true
      },
      hide () {
        this.keyboard.visible = false
        this.keyboard.borderNum = ''
      },
      //  有衣物关箱
      closeBox() {
        let boxCode = this.$route.query.boxCode;
        let boxDetailId = this.$route.query.boxDetailId;
        this.$axios.post('deliveryRest/createCloseBox', {
          boxDetailId: boxDetailId,
          deliveryId: this.deliveryId,
        }).then(res => {
          if (res.data.result) {
            this.deliveryId
              ? this.$router.push({
                path: 'deliveryConfirm',
                query: {deliveryId: this.deliveryId, boxCode: boxCode, boxDetailId: boxDetailId},
              }) : this.$router.push({
                path: 'home',
                query: {isAdmin: true},
              });
          } else {
            this.$message.error('扫码出错:' + res.data.msg);
          }
        });
      },
      getList() {
        let boxDetailId = this.$route.query.boxDetailId;
        this.$axios.post('deliveryRest/createDeliveryClothes', {
          boxDetailId: boxDetailId,
          bagCode: this.bagCode,
          deliveryId: this.deliveryId,
        }).then(res => {
          this.bagCode = '';
          if (res.data.result) {
            this.deliveryId = res.data.obj;
            this.getDeliveryInfoList(res.data.obj);
          } else {
            this.$message.error('扫码出错:' + res.data.msg);
          }
        });
      },
      // 获取本次投递信息
      getDeliveryInfoList(id) {
        this.showOrder = true;
        this.$axios.get('deliveryRest/getDeliveryInfoList', {
          params: {
            deliveryId: id,
          },
        }).then(res => {
          this.deliveryInfo = res.data;
        });
      },
      //超时重置
      handleOver() {
        this.$axios.post('deliveryRest/reOpenBox', {
          deliveryId: this.deliveryId,
        });
      },
      handleKeydown(event) {
        if (event.keyCode == 13) {
          this.getList();
        } else {
          this.bagCode = this.bagCode + String.fromCharCode(event.keyCode);
        }
      },
    },

  };
</script>

<style lang="scss">
    .scan_delivery {
        .delivery_box {
            .box_title {
                div {
                    margin: 0.20rem 0;
                }
            }

            .delivery_list {
                margin: 0 0.80rem 0.60rem 0.80rem;
                text-align: center;
                height: 6rem;
                overflow-y: scroll;

                .list_head {
                    background: rgba(236, 245, 252, 1);
                    padding: 0.19rem 0;
                    color: #999;
                }

                .list_body {
                    padding: 0.19rem 0;
                    border-bottom: 0.02rem solid rgba(202, 229, 253, 1);
                }
            }

            .box_form {
                padding: 0 0.80rem;
                position: relative;
                .border1 {
                    position: absolute;
                    height: 0.4rem;
                    border-left: 1px solid #000;
                    top: 0.65rem;
                    z-index: 99;
                    left: 1.1rem;
                }
                .el-input {
                    margin-top: 0.40rem;
                    border-radius: 0.16rem;
                    background-color: #ECF5FC;
                    overflow: hidden;
                    border: 1px solid transparent;
                }

                input {
                    padding: 0 0.40rem;
                    border: none;
                    background-color: #ECF5FC;
                    line-height: 0.9rem;
                    height: 0.9rem;
                    font-size: 0.32rem;

                    &::placeholder {
                        color: #999999;
                    }
                }
                .input_checked{
                    border:1px solid #0a82ec;
                }
            }
        }
    }
</style>
